<template>
  <div class="main">
    <main></main>
    <footer>
      <div>
        <span>{{ product.title }}</span>
        <span>￥{{ product.price }}</span>
      </div>
      <button @click="AddProToCart" :disabled="!props.product.inventory">加入购物车</button>
    </footer>
  </div>
</template>
<script setup lang="ts">
import { IProduct } from "@/server/api/products";

const props = withDefaults(
  defineProps<{
    product: Omit<IProduct, "id">; //过滤id属性
  }>(),
  {
    product: () => ({
      title: "",
      price: 0,
      inventory: 0,
    }),
  }
);

const emit = defineEmits<{
  (e: "AddProToCart"): void;
}>();

function AddProToCart() {
  emit("AddProToCart");
}
</script>
<style scoped>
.main {
  width: 15rem;
  margin: 0.5rem;
  box-shadow: gray 1px 1px 4px 0;

  border-radius: 0.2rem;
}
main {
  height: 6rem;
}
footer {
  padding: 0.4rem 0.4rem;
  display: flex;
  justify-content: space-between;
}
footer div span:not(footer div span:last-of-type) {
  margin-right: 2rem;
  font-size: 0.8rem;
}
footer div span:last-of-type {
  color: tomato;
}
</style>
